<template>
	<view>
		<view class="top">
			<view class="title">
				<view class="prompt">
					支付成功，请您前往指定门店消费
				</view>

				<view class="shop">
					<uni-list-item title="伟业汽车美容店(人民路)" note="山阳区人民中路33号" 
						thumb="/static/店铺(白).png"
					 	thumb-size="md" />
					<view class="navigation">
						<image src="/static/plane@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">


				<view class="content">
					<view class="details">
						<view class="headline">
							订单详情
						</view>
						<view class="service-name">
							<uni-list-item :border="false" title="车辆清洗" rightText="￥39.90"/>
							<uni-list-item :border="false" title="车辆附加费用"  rightText="0"/>
						</view>
						
						<view class="price">
							<uni-list-item :border="false" title="原价" rightText="￥59.90"/>
							<uni-list-item :border="false" title="店家优惠"  rightText="-￥20"/>
						</view>
						
						<view class="coupon">
							<uni-list-item title="优惠券" rightText="-￥10"/>
						</view>
						
						<view class="endprice">
							<uni-list-item :border="false" title="支付金额" rightText="￥29.9"/>
						</view>
					</view>
					
					<view class="info">
						<view class="headline">
							订单信息
						</view>
						
						<view class="detailsinfo">
							<uni-list-item title="订单号" rightText="121212121212"/>
							<uni-list-item title="下单时间"  rightText="2023-03-03 17:40"/>
							<uni-list-item title="预约时间" rightText="2023-03-03 17:40"/>
							<uni-list-item title="车辆"  rightText="奔驰E300/沪AZR666"/>
							
						</view>
					</view>
				</view>


			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.top{
		height: 25vh;
		background-color: #1f73f1;
		padding: 20rpx;
	}
	.bottom{
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 75vh;
	}
	.shop ::v-deep .uni-list-item__container{
		background-color: #1f73f1;
	}
	.content{
		transform: translateY(-150rpx);
	}
	.navigation{
		width: 50rpx;
		height: 50rpx;
		margin-right: 40rpx;
		
	}
	.navigation image{
		width: 50rpx;
		height: 50rpx;
	}
	.shop{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.shop ::v-deep .uni-list-item__content-title{
		font-size: 32rpx;
		color: #ffffff;
	}
	.shop ::v-deep .uni-list-item__content-note{
		font-size: 25rpx;
		color: #ffffff;
	}
	.prompt{
		color: #ffffff;
		margin-left: 20rpx;
		margin-bottom: 30rpx;
	}
	.endprice{
		border-bottom: 1rpx solid #e9e9eb;
	}
	.headline{
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 20rpx;
		padding: 30rpx 0;
	}
	.info{
		margin-top: 50rpx;
	}
	.details,
	.info{
		background-color: #ffffff;
		border-radius: 30rpx;
	}
	.service-name{
		border-bottom: 8rpx solid #e9e9eb;
	}
	.coupon{
		border-bottom: 8rpx solid #e9e9eb;
	}
	.service-name ::v-deep .uni-list-item:first-child .uni-list-item__extra-text {
		color: #000000;
		font-size: 35rpx;
	}
	.service-name ::v-deep .uni-list-item:nth-child(2) .uni-list-item__extra-text {
		font-size: 40rpx;
		color: #000000;
	}
	.price ::v-deep .uni-list-item:first-child .uni-list-item__extra-text {
		color: #000000;
		font-size: 35rpx;
	}
	.price ::v-deep .uni-list-item:nth-child(2) .uni-list-item__extra-text {
		font-size: 35rpx;
		color:#e43d33;
	}
	.coupon ::v-deep.uni-list-item__extra-text{
		font-size: 35rpx;
		color:#e43d33;
	}
	.endprice ::v-deep.uni-list-item__extra-text{
		font-size: 43rpx;
		color:#e43d33;
	}

</style>
